<ul class="info-item-block">
    <li>
        <span class="item-hd item-title">人群设置</span>
    </li>
    <li>
        <div class="item-bd alone-item-bd">
            <div class="item-block-radio-con">
                <div class="item-block-radio user-click  is_dist_people {if $info['is_dist_people'] == 1}active{/if}">
                    <div class="left-radio">
                        <input type="radio" value="1" name="is_dist_people" {if $info['is_dist_people'] == 1}checked{/if}/>
                    </div>
                    <div class="right-block">
                        <div class="radio-title">区分人群</div>
                        <div class="radio-des">套餐区分成人、儿童等人群</div>
                    </div>
                </div>
                <div class="item-block-radio ml-30 user-click is_dist_people {if $info['is_dist_people'] == 0}active{/if}">
                    <div class="left-radio">
                       <input type="radio" value="0" name="is_dist_people" {if $info['is_dist_people'] == 0}checked{/if}/>
                    </div>
                    <div class="right-block">
                        <div class="radio-title">不区分人群</div>
                        <div class="radio-des">套餐不区分人群</div>
                    </div>
                </div>
            </div>
            <div class="item-pad mt-20 {if $info['is_dist_people'] == 0}hide{/if}" id="people_set" style="max-width: 1670px!important;">
                <div>
                    <i class="c-red">*</i><span class="c-333 f-12 mr-10">选择人群</span><span class="c-999">请至少维护一个人群</span>
                </div>
                <div>
                    {loop $people_group_config $people_group}
                    <label class="radio-label select-none mr-15">
                        <input type="checkbox" name="people_group[]" value="{$people_group['group_id']}" {if $people_group['id']}checked="checked"{/if}>{$people_group['name']}
                    </label>
                    {/loop}
                </div>
                {loop $people_group_config $people_group}

                <div class="item-pad-block mt-10  people-group-con-{$people_group['group_id']} {if empty($people_group['id'])}hide{/if}">
                    <div>{$people_group['name']}：</div>

                    {if empty($people_group['id'])}
                    <div class="mt-10 people-group-type-1-{$people_group['group_id']}">
                        <label>
                            <input type="radio" value="1" data-name="{$people_group['name']}" data-id="{$people_group['group_id']}" checked name="people_age_type[{$people_group['group_id']}]"/>
                        </label>
                        <label>
                            <input type="number"  name="start_age[{$people_group['group_id']}]"  value="" class="input-text w100 people-group-value-1-{$people_group['group_id']}"/>
                        </label>
                        <label class="select-box w100">
                            <select class="select people-group-value-1-{$people_group['group_id']}" name="start_age_type[{$people_group['group_id']}]">
                                <option value="1" >周岁（含）</option>
                                <option value="2" >周岁（不含）</option>
                            </select>
                        </label>
                        <label class="select-box w100">
                            <select class="select people-group-value-1-{$people_group['group_id']}">
                                <option value="1">以上</option>
                            </select>
                        </label>
                        （按
                        <label class="select-box w100">
                            <select class="select people-group-value-1-{$people_group['group_id']}" name="age_type[{$people_group['group_id']}]">
                                <option value="1">生日</option>
                                <option value="2">年份</option>
                            </select>
                        </label>
                        计算年龄）
                    </div>
                    <div class="mt-10 people-group-type-2-{$people_group['group_id']}">
                        <label>
                            <input type="radio"  value="2" data-name="{$people_group['name']}" data-id="{$people_group['group_id']}" name="people_age_type[{$people_group['group_id']}]"/>
                        </label>
                        <label>
                            <input type="number" name="start_age[{$people_group['group_id']}]" disabled  value="" class="input-text w100 people-group-value-2-{$people_group['group_id']}"/>
                        </label>
                        <label class="select-box w100">
                            <select disabled class="select people-group-value-2-{$people_group['group_id']}" name="start_age_type[{$people_group['group_id']}]">
                                <option value="1" >周岁（含）</option>
                                <option value="2" >周岁（不含）</option>
                            </select>
                        </label>
                        <label>
                            -
                            <input type="number" disabled value="" class="input-text w100 people-group-value-2-{$people_group['group_id']}" name="end_age[{$people_group['group_id']}]"/>
                        </label>
                        <label class="select-box w100">
                            <select disabled class="select people-group-value-2-{$people_group['group_id']}" name="end_age_type[{$people_group['group_id']}]">
                                <option value="1" >周岁（含）</option>
                                <option value="2" >周岁（不含）</option>
                            </select>
                        </label>
                        （按
                        <label class="select-box w100">
                            <select disabled class="select people-group-value-2-{$people_group['group_id']}" name="age_type[{$people_group['group_id']}]">
                                <option value="1" >生日</option>
                                <option value="2" >年份</option>
                            </select>
                        </label>
                        计算年龄）
                    </div>
                    {else}
                    <div class="mt-10 people-group-type-1-{$people_group['group_id']}">
                        <label>
                            <input type="radio" value="1" data-name="{$people_group['name']}" data-id="{$people_group['group_id']}" name="people_age_type[{$people_group['group_id']}]" {if $people_group['type'] == 1}checked{/if}/>
                        </label>
                        <label>
                            <input type="number"
                                   name="start_age[{$people_group['group_id']}]"
                                   value="{if $people_group['type'] == 1}{$people_group['start_age']}{/if}"
                                   class="input-text w100 people-group-value-1-{$people_group['group_id']}" {if $people_group['type'] == 2}disabled{/if} />
                        </label>
                        <label class="select-box w100">
                            <select class="select  people-group-value-1-{$people_group['group_id']}" name="start_age_type[{$people_group['group_id']}]" {if $people_group['type'] == 2}disabled{/if} >
                                <option value="1" {if $people_group['type'] == 1 && $people_group['start_age_type'] == 1}selected{/if}>周岁（含）</option>
                                <option value="2" {if $people_group['type'] == 1 && $people_group['start_age_type'] == 2}selected{/if}>周岁（不含）</option>
                            </select>
                        </label>
                        <label class="select-box w100">
                            <select class="select people-group-value-1-{$people_group['group_id']}" {if $people_group['type'] == 2}disabled{/if} >
                                <option value="1" >以上</option>
                            </select>
                        </label>
                        （按
                        <label class="select-box w100">
                            <select class="select people-group-value-1-{$people_group['group_id']}" name="age_type[{$people_group['group_id']}]" {if $people_group['type'] == 2}disabled{/if} >
                                <option value="1" {if $people_group['type'] == 1 && $people_group['age_type'] == 1}selected{/if}>生日</option>
                                <option value="2" {if $people_group['type'] == 1 && $people_group['age_type'] == 2}selected{/if}>年份</option>
                            </select>
                        </label>
                        计算年龄）
                    </div>
                    <div class="mt-10 people-group-type-2-{$people_group['group_id']}">
                        <label>
                            <input type="radio" value="2" data-name="{$people_group['name']}" data-id="{$people_group['group_id']}" name="people_age_type[{$people_group['group_id']}]" {if $people_group['type'] == 2}checked{/if}/>
                        </label>
                        <label>
                            <input type="number"
                                   name="start_age[{$people_group['group_id']}]"
                                   value="{if $people_group['type'] == 2}{$people_group['start_age']}{/if}"
                                   class="input-text w100 people-group-value-2-{$people_group['group_id']}" {if $people_group['type'] == 1}disabled{/if} />
                        </label>
                        <label class="select-box w100">
                            <select class="select people-group-value-2-{$people_group['group_id']}" name="start_age_type[{$people_group['group_id']}]" {if $people_group['type'] == 1}disabled{/if}>
                                <option {if $people_group['type'] == 2 && $people_group['start_age_type'] == 1}selected{/if} value="1" >周岁（含）</option>
                                <option {if $people_group['type'] == 2 && $people_group['start_age_type'] == 2}selected{/if} value="2" >周岁（不含）</option>
                            </select>
                        </label>
                        <label>
                            -
                            <input type="number"
                                   name="end_age[{$people_group['group_id']}]"
                                   value="{if $people_group['type'] == 2}{$people_group['end_age']}{/if}"
                                   class="input-text w100 people-group-value-2-{$people_group['group_id']}" {if $people_group['type'] == 1}disabled{/if}/>
                        </label>
                        <label class="select-box w100">
                            <select class="select people-group-value-2-{$people_group['group_id']}" name="end_age_type[{$people_group['group_id']}]" {if $people_group['type'] == 1}disabled{/if}>
                                <option {if $people_group['type'] == 2 && $people_group['end_age_type'] == 1}selected{/if} value="1" >周岁（含）</option>
                                <option {if $people_group['type'] == 2 && $people_group['end_age_type'] == 2}selected{/if} value="2" >周岁（不含）</option>
                            </select>
                        </label>
                        （按
                        <label class="select-box w100">
                            <select class="select people-group-value-2-{$people_group['group_id']}" name="age_type[{$people_group['group_id']}]" {if $people_group['type'] == 1}disabled{/if}>
                                <option value="1" {if $people_group['type'] == 2 && $people_group['age_type'] == 1}selected{/if}>生日</option>
                                <option value="2" {if $people_group['type'] == 2 && $people_group['age_type'] == 2}selected{/if}>年份</option>
                            </select>
                        </label>
                        计算年龄）
                    </div>
                    {/if}

                    <div class="mt-20" id="people_config_des_{$people_group['group_id']}">
                        {if !empty($people_group['des'])}
                        {$people_group['name']}：{$people_group['des']}
                        {/if}
                    </div>
                </div>
                {/loop}
            </div>
        </div>
    </li>
</ul>
<script type="text/javascript">
    $(document).ready(function() {
        // 切换人群区分
        $(".item-block-radio-con").on('click', '.is_dist_people', function (){
            $(this).siblings().removeClass('active')
            $(this).addClass('active')
            $(this).find('input').prop('checked', true);

            var value = $("input[name='is_dist_people']:checked").val();
            if (value === '1') {
                // 区分人群
                $("#people_set").removeClass('hide');
            } else {
                $("#people_set").addClass('hide');
            }
        });

        // 更新年龄描述
        function chengAgeDes(groupId) {
            var groupObj = $(".people-group-con-" + groupId),
                checkObj = groupObj.find('input[name="people_age_type[' + groupId + ']"]:checked'),
                type = checkObj.val(),
                groupName = checkObj.data('name'),
                typeObj = $(".people-group-type-" + type + '-' + groupId),
                startAgeObj = typeObj.find('input[name="start_age[' + groupId + ']"]'),
                startAgeTypeObj = typeObj.find('select[name="start_age_type[' + groupId + ']"]').find("option:selected"),
                endAgeObj = typeObj.find('input[name="end_age[' + groupId + ']"]'),
                endAgeTypeObj = typeObj.find('select[name="end_age_type[' + groupId + ']"]').find("option:selected"),
                ageTypeObj = typeObj.find('select[name="age_type[' + groupId + ']"]').find("option:selected"),
                des = '',
                desObj = $("#people_config_des_" + groupId),
                startAge = startAgeObj[0].value,
                startAgeType = startAgeTypeObj.text(),
                ageType = ageTypeObj.text();

            if (startAge < 0) {
                startAgeObj[0].value = ''
                desObj.text('');
                return false;
            }

            if (startAge && startAgeType && ageType) {
                // 成人：18周岁(含) — 23周岁(含)（按年份计算年龄）
                des += groupName + '：' + startAge + ' ' + startAgeType;

                if (type === '2') {
                    var endAge = endAgeObj[0].value,
                        endAgeType = endAgeTypeObj.text();
                    if (endAge < 0) {
                        endAgeObj[0].value = ''
                        desObj.text('');
                        return false;
                    }
                    startAge = parseInt(startAge)
                    endAge = parseInt(endAge)
                    if (startAge >= endAge) {
                        endAgeObj[0].value = ''
                        desObj.text('');
                        return false;
                    }

                    if (!endAge || !endAgeType) {
                        des = '';
                    } else {
                        des += '- ' + endAge + ' ' + endAgeType;
                        des += '（按' + ageType + '计算年龄）';
                    }
                } else {
                    des += '以上（按' + ageType + '计算年龄）';
                }
            }

            desObj.text(des);
        }

        // 人群设置
        $("#people_set").on('change', 'input[name*="people_group"]',function() {
            var value = $(this).val(),
                hasChecked = $(this).attr("checked"),
                select = ".people-group-con-"+value;
            if(hasChecked === 'checked') {
                $(select).removeClass('hide');
            }else{
                $(select).addClass('hide');
            }
        }).on('blur', '.item-pad-block input', function () {
            var type = $(this).attr('type');
            if (type !== 'radio') {
                var groupId = $(this).parent().parent().find('input[type=radio]').data('id');
                chengAgeDes(groupId);
            }
        }).on('change', 'input[type=radio]', function () {
            var value = $(this).val(),
                disabled = value == 1 ? 2 : 1,
                groupId = $(this).data('id'),
                select = '.people-group-value-' + value + '-' + groupId,
                selectDisabled = '.people-group-value-' + disabled + '-' + groupId;

            $(select).prop('disabled', false);
            $(selectDisabled).prop('disabled', true);

            chengAgeDes(groupId);
        }).on('change', '.item-pad-block select', function () {
            var groupId = $(this).parent().parent().find('input[type=radio]').data('id');
            chengAgeDes(groupId);
        })
    })
</script>
